<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>复合选择器</title>
		<style>
			/* 属性选择器： */
			h3[title='biaoti'] {
				color: blue;
			}
			/* 优先级比类选择器高 */
			p[class='p1'] {
				color: blueviolet;
			}
			/* .p1 {
				color: red;
			} */
			/* 指定元素选择器 */
			/* 优先级比单独的类/id选择器优先级高 */
			p.p1 {
				color: green;
			}
			p#three {
				color: chocolate;
			}
		</style>
	</head>
	<body>
		<h3>三级标题</h3>
		<h3 title="biaoti">三级标题</h3>
		<p class="p1">第一行文本</p>
		<p class="p1">第二行文本</p>
		<p id="three">第三行文本</p>
		<p>第四行文本</p>
		<p>第五行文本</p>
	</body>
</html>